<template>
  <div class="app-container">
    <div class="app-title">
      查询条件
    </div>
    <div class="filter-container clearfix">
      <div class="searchItem">
        <label for="">用户ID:</label>
        <el-input
          v-model="searchForm.keyword"
          class="search-item"
        />
      </div>
      <div class="searchItem">
        <label for="">平台:</label>
        <el-select v-model="searchForm.source" placeholder="全部">
          <el-option label="Ebroker" value="1" />
          <el-option label="车E家" value="2" />
        </el-select>
      </div>
      <div class="searchItem">
        <label for="">反馈类型:</label>
        <el-select v-model="searchForm.type" placeholder="全部">
          <!-- ：0其他，1买车，2卖车，3经纪人 -->
          <el-option label="买车" value="1" />
          <el-option label="卖车" value="2" />
          <el-option label="经纪人" value="3" />
          <el-option label="其他" value="0" />
        </el-select>
      </div>
      <div class="searchItem">
        <label for="">反馈时间:</label>
        <el-date-picker
          v-model="dateTime"
          :range-separator="null"
          start-placeholder="反馈时间"
          value-format="yyyy-MM-dd"
          class="search-item date-range-item"
          type="daterange"
        />
      </div>
      <div class="searchItem">
        <el-button v-hasPermission="['feedList:search']" class="searchItembtn" type="primary" @click="search">
          {{ $t("common.search") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
      </div>
    </div>
    <div class="app-title">
      反馈列表
    </div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
      @sort-change="sortChange"
    >
      <el-table-column
        label="序号"
        prop="username"
        :show-overflow-tooltip="true"
        align="center"
        min-width="120px"
        type="index"
      >
        <!-- <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template> -->
      </el-table-column>
      <el-table-column
        label="反馈时间"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="平台"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ ['','E-Broker','车E家'] [scope.row.source] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="反馈类型"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ ['其他','买车','卖车','经纪人'][scope.row.type] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="反馈用户ID"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="反馈内容"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <!-- <i
            v-hasPermission="['feedList:view']"
            class="el-icon-view table-operation"
            style="color: #87d068"
            @click="view(row)"
          /> -->
          <el-link v-hasPermission="['feedList:view']" class="el-icon-view" @click="view(row)">
            查看详情
          </el-link>
          <el-link
            v-has-no-permission="['user:view', 'user:update', 'user:delete']"
            class="no-perm"
          >
            {{ $t("tips.noPermission") }}
          </el-link>
        </template>
      </el-table-column>

    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      searchForm: {
        keyword: '',
        source: '',
        type: ''
      },
      loading: false,
      tableKey: 0,
      list: [],
      dateTime: ''
    }
  },
  created() {
    this.search()
  },
  methods: {
    search(e) {
      this.loading = true
      let startTime = ''
      let endTime = ''
      if (e && e.page) {
        this.pagination.pageSize = e.limit
        this.pagination.pageNum = e.page
      }
      if (this.dateTime) {
        startTime = `${this.dateTime[0]}%2000:00:00`
        endTime = `${this.dateTime[1]}%2023:59:59`
      }
      this.$get('/web/feedback/list', { ...this.pagination, ...this.searchForm, startTime, endTime }, 'json').then(res => {
        this.loading = false
        if (res.data.code === '0') {
          this.list = res.data.data.rows
          this.total = res.data.data.total
        }
      }).catch(() => {
        this.loading = false
      })
    },
    sortChange() {},
    reset() {
      this.dateTime = ''
      this.searchForm = {}
      this.search()
    },
    view(row) {
      this.$router.push({
        name: 'feedListDetail',
        query: {
          id: row.id
        }
      })
    }
  }
}
</script>

<style>
</style>
